<template>
  <n-drawer class="sale-info" v-model:show="saleInfoDrawerActive" width="63%">
    <n-drawer-content body-style="--n-body-padding:0" closable>
      <template #header>
        <p class="my-title--primary">销售订单(详情)</p>
      </template>
      <div class="i-card">
        <div class="i-card_top">
          <div class="i-card_top-icon"></div>
          <div class="i-card_top-name">
            <span>西门起</span>
            <span>13343452345</span>
          </div>
        </div>
        <div class="i-card_bottom">
          <span>会员类型: 至尊会员</span>
          <span>本店会员：是</span>
        </div>
      </div>
      <div class="i-content">
        <div class="i-content_item">
          <div class="i-content_item-left">
            订单编号：xsDD-3213123123
          </div>
          <div class="i-content_item-right">
            订单类型：销售订单
          </div>
        </div>
        <div class="i-content_item">
          <div class="i-content_item-left">
            订单金额：￥248
          </div>
          <div class="i-content_item-right">
            实收金额：￥248
          </div>
        </div>
        <div class="i-content_item">
          <div class="i-content_item-left">
            订单积分：5
          </div>
          <div class="i-content_item-right">
            下单时间：2022-02-23 09:23:32
          </div>
        </div>
        <div class="i-content_item">
          <div class="i-content_item-left">
            支付方式：至尊钱包（￥48）微信（￥200）
          </div>
          <div class="i-content_item-right">
            操作人：小米
          </div>
        </div>
      </div>
      <div class="i-total">
        <div class="i-total_container">
          <div class="i-total_container-quantity">
            合计数量：
            <span>6件</span>
          </div>
          <div class="i-total_container-line"></div>
          <div class="i-total_container-integral">
            合计积分：
            <span>0</span>
          </div>
        </div>
      </div>
      <div class="i-table">
        <n-data-table :columns="columns" :data="data" bordered style="--n-font-size:24px" />
      </div>
      <div class="i-return-info">
        <p class="i-return-info_title">退单详情</p>
        <div class="i-return-info_content">
          <p class="i-return-info_content-item">退回金额：￥248</p>
          <p class="i-return-info_content-item">退回方式：账户余额</p>
          <p class="i-return-info_content-item">退回时间：2022-02-25 09:51:18</p>
          <p class="i-return-info_content-item">操作人：小米</p>
        </div>
      </div>
      <template #footer>
        <div class="i-footer">
          <div class="i-footer_left">
            <button class="i-footer_left-return my-btn--secondary" @click="$emit('return')">退单</button>
            <button class="i-footer_left-exchange my-btn--secondary" v-if="false">调换</button>
            <button class="i-footer_left-transform my-btn--secondary" v-else @click="$emit('transform')">转化</button>
            <button class="i-footer_left-print my-btn--secondary">打印</button>
          </div>
          <button class="my-btn--primary">确认</button>
        </div>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>

<script setup>
import {
  inject,
  reactive
} from "vue";
const saleInfoDrawerActive = inject('saleInfoDrawerActive')

const columns = [{
  title: "商品",
  key: "goods"
},
{
  title: "规格",
  key: "spec"
},
{
  title: "数量",
  key: "quantity"
},
{
  title: "单价￥",
  key: "amount"
},
{
  title: "商品积分",
  key: "integral"
}
];
const data = reactive([{
  goods: 'B1-4042带腿胸托',
  spec: "黑色/XL",
  quantity: 1,
  amount: 248,
  integral: 1
},
{
  goods: 'B1-4042带腿胸托',
  spec: "黑色/XL",
  quantity: 1,
  amount: 248,
  integral: 1
},
{
  goods: 'B1-4042带腿胸托',
  spec: "黑色/XL",
  quantity: 1,
  amount: 248,
  integral: 1
}
])
</script>

<style lang="less" scoped>
.sale-info {
  .i-card {
    width: 1110px;
    height: 110px;
    padding: 20px;
    margin: 20px 0 20px 20px;
    background: #d6dae7;

    &_top {
      display: flex;
      align-items: center;

      &-icon {
        width: 48px;
        height: 48px;
        margin-right: 10px;
        background: #fff;
      }

      &-name {
        font-size: 30px;
        font-weight: bold;
        color: #2e323d;

        > span {
          &:nth-child(1) {
            margin-right: 10px;
          }
        }
      }
    }

    &_bottom {
      margin: 20px 0 0 58px;
      font-size: 24px;
      font-weight: 500;
      color: #4a5060;

      > span {
        &:nth-child(1) {
          margin-right: 450px;
        }
      }
    }
  }

  .i-content {
    margin: 20px 40px 20px 20px;

    &_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 1110px;
      margin: 10px 0;
      font-size: 24px;
      font-weight: 500;
      color: #4a5060;

      &-left {
        flex: 2;
      }

      &-right {
        flex: 1;
      }
    }
  }

  .i-total {
    display: flex;
    justify-content: flex-end;
    margin: 20px 40px 20px 0;

    &_container {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      width: 604px;
      height: 60px;
      font-size: 24px;
      font-weight: bold;
      color: #666;
      background: #f7f7f7;
      border-radius: 5px;

      &-quantity,
      &-integral {
        width: 200px;
        text-align: center;

        > span {
          color: #4a5060;
        }
      }

      &-line {
        width: 1px;
        height: 30px;
        background: #d8d8d8;
      }
    }
  }

  .i-table {
    margin: 20px 40px 20px 20px;
  }

  .i-return-info {
    &_title {
      position: relative;
      margin: 20px 0 20px 40px;
      font-size: 28px;
      font-weight: 500;
      color: #4a5060;

      &::before {
        position: absolute;
        top: 10px;
        left: -15px;
        content: "";
        width: 6px;
        height: 24px;
        background: #373b4f;
      }
    }

    &_content {
      display: flex;
      flex-wrap: wrap;
      width: 990px;
      height: 84px;
      padding: 20px 80px;
      margin: 0 0 30px 20px;
      background: #f7f7f7;

      &-item {
        margin-bottom: 10px;
        font-size: 24px;
        font-weight: 500;
        color: #4a5060;
        text-align: left;

        &:nth-child(2n-1) {
          width: 50%;
          margin-right: 150px;
        }
      }
    }
  }

  .i-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    &_btn {
      width: 160px;
      height: 68px;
      text-align: center;
      line-height: 68px;
      border-radius: 5px;
    }

    &_left {
      display: flex;
      align-items: center;

      &-return {
        color: #ec3f14;
        background: #ffefeb;
        border: 1px solid #ec3f14;
      }

      &-exchange {
        margin: 0 20px;
        color: #8b90f7;
        background: #e4e5f7;
        border: 1px solid #8b90f7;
      }

      &-transform {
        margin: 0 20px;
        color: #2E323D;
        background: #f8f8f8;
        border: 1px solid #c5c5c5;
        border-radius: 5px;
      }

      &-print {
        color: #2c8cf0;
        background: #ebf4ff;
        border: 1px solid #2c8cf0;
      }
    }
  }
}
</style>